<template>
<el-form ref="EBusinessInfoForm" :model="eBusinessInfo" :rules="eBusinessInfoRules" label-width="120px" class="demo-ruleForm"
    size="default" status-icon>
    <p style="font-size: 24px;
    margin-bottom: 30px;
    padding-top: 10px;
    padding-left: 20px;">工商信息</p>
    <el-form-item label="公司全称" prop="businessName" style="margin-top: 10px;">
      <el-input v-model="eBusinessInfo.businessName" style="width: 300px;" placeholder="请输入公司全称"/>
    </el-form-item>
    
    <el-form-item label="成立时间" required>
      <el-col :span="11">
        <el-form-item prop="birth">
          <el-date-picker v-model="eBusinessInfo.businessSetTime" type="date" value-format="YYYY-MM-DD" format="YYYY-MM-DD"
            label="请选择时间" placeholder="请选择时间" style="width: 300px"  />
        </el-form-item>
      </el-col>
    </el-form-item>
    <el-form-item label="注册资金" prop="businessRegCapital" style="margin-top: 10px;">
      <el-input v-model="eBusinessInfo.businessRegCapital" style="width:300px;" placeholder="请输入公司注册资金，单位万元"/>
    </el-form-item>
    <el-form-item label="法人代表" prop="businessLegalRepresentative" style="margin-top: 10px;">
      <el-input v-model="eBusinessInfo.businessLegalRepresentative" style="width: 300px;" placeholder="请输入公司法人代表" />
    </el-form-item>
    
    
    
    <el-form-item>
      <el-button type="success" @click="saveInfo(EBusinessInfoForm)">保存</el-button>
      <el-button @click="cancelEdit(EBusinessInfoForm)">取消</el-button>
    </el-form-item>
  </el-form>
</template>
<script lang='ts' setup>
import { ref, onMounted, reactive, getCurrentInstance } from "vue"
import { useStore } from "vuex"
import type { FormInstance, FormRules } from 'element-plus'
import { eBusinessInfoRules, eBusinessInfo } from "@/utills/enterpriseValidators"
import { elmessage, data } from "@/hook/hook"

const store = useStore()
// @ts-ignore
const { proxy } = getCurrentInstance() // 1.获取proxy实例

const EBusinessInfoForm = ref<FormInstance>()


  onMounted(()=>{
    eBusinessInfo.businessName=store.state.enterpriseState.EBusinessInfo.businessName
    eBusinessInfo.businessSetTime=store.state.enterpriseState.EBusinessInfo.businessSetTime
    eBusinessInfo.businessRegCapital=store.state.enterpriseState.EBusinessInfo.businessRegCapital
    eBusinessInfo.businessLegalRepresentative=store.state.enterpriseState.EBusinessInfo.businessLegalRepresentative
    
    
  })

// 提交按钮
const saveInfo = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      // 更改公司工商信息
      store.commit("editEBusinessInfo")
      store.commit("upEBusinessInfo",eBusinessInfo)
    } else {
      console.log('error submit!', fields)
    }

  })

}
// 取消按钮
function cancelEdit(formEl: FormInstance | undefined) {
  if (!formEl) return
  formEl.resetFields()
  store.commit("editEBusinessInfo")
}


</script>
<style scoped>
  .demo-ruleForm {
  height: 350px;
}
.demo-ruleForm:hover {
  transition-duration: 0.3s;
  transition-property: box-shadow;
  box-shadow: 0 0 3px #97999b;
  cursor: pointer;
}
</style>